﻿<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head runat="server">
    <title>BusTraffic</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=.492&amp;sensor=false&amp;key=ABQIAAAA0AuyIOhCAnL9MOeOP1aKwRSf8xm5yYv0JxQnScVem-6GxDSR-hRhD8ZzokbFwBW-oA8z1u4gmUSiQA"></script>
    <script type="text/javascript">

        _mSvgForced = true;
        _mSvgEnabled = true;

        var map;

        // Create a base icon for all of our markers that specifies the
        // shadow, icon dimensions, etc.
        var baseIcon = new GIcon();
       // baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
        baseIcon.iconSize = new GSize(25, 25);
        //baseIcon.shadowSize = new GSize(37, 34);
        baseIcon.iconAnchor = new GPoint(12, 12);
        baseIcon.infoWindowAnchor = new GPoint(9, 2);
        
        function createMarker(point, vehicleid, heading) {
            var headingIconVal = heading;
            
            var files = ["North", "NorthEast", "East", "SouthEast", "South", "SouthWest", "West", "NorthWest" ];
            var dirFile = files[Math.floor((heading + 22.5) / 45.0)];

            var dirIcon = new GIcon(baseIcon);
            dirIcon.image = "images/" + dirFile + ".png";

            // Set up our GMarkerOptions object
            markerOptions = { icon: dirIcon };

            var marker = new GMarker(point, markerOptions);
            GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml("Bus <b>" + vehicleid + "</b><br/>Heading:" + heading);
            });
            
            return marker;
        }

        function createTrail(poslog)
        {
            var positions = poslog.getElementsByTagName("Position");

            var points = new Array();
            for (var i = 0; i < positions.length; i++)
            {
                points.push(new GLatLng(parseFloat(GXml.value(positions[i].getElementsByTagName("lat")[0])), parseFloat(GXml.value(positions[i].getElementsByTagName("lng")[0]))));
            }

            var polyLine = new GPolyline(points, "#0000FF", 3);
            return polyLine;
        }

        function refresh() {

            GDownloadUrl("RouteXml.aspx?route=" + document.getElementById("route").value, function(data, responseCode) {
                var xml = GXml.parse(data);
                var buses = xml.documentElement.getElementsByTagName("bus");

                map.clearOverlays();

                for (var i = 0; i < buses.length; i++) {
                    var point = new GLatLng(parseFloat(GXml.value(buses[i].getElementsByTagName("lat")[0])), parseFloat(GXml.value(buses[i].getElementsByTagName("lng")[0])));
                    var vehicleid = parseInt(GXml.value(buses[i].getElementsByTagName("vehicle")[0]));
                    var heading = parseInt(GXml.value(buses[i].getElementsByTagName("heading")[0]));
                    map.addOverlay(createMarker(point, vehicleid, heading));

                    map.addOverlay(createTrail(buses[i].getElementsByTagName("PositionLog")[0]));
                }
            });
        }
        
        function initialize() {
            if (GBrowserIsCompatible()) {            
                map = new GMap2(document.getElementById("map_canvas"));
                map.addControl(new GLargeMapControl());
                map.addControl(new GMapTypeControl());
                map.setCenter(new GLatLng(47.6686609659264,-122.371513513894), 13);

                refresh();
            }
        }

    </script>
</head>
<body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
    <input id="route" type="text" /><button onclick="refresh()">Refresh</button>
    <div id="map_canvas" style="width: 1000px; height: 600px"></div>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>
